<style>
    #display {
        position: relative;
    }
    #display .outline {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 72.5%;
        background: #fff;
        border: 1px solid #DDDEE0;
        padding: 10px;
        padding-bottom: 0;
    }
    #display .imgbox {
        position: relative;
        overflow: hidden;
    }
    #display .imgbox > img {
        opacity: 0;
        position: relative;
        z-index: -1;
    }
    #display .imgbox a img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        opacity: 0;
        transition: opacity 2s;
    }
    #display .imgbox .hide {
        opacity: 0;
        z-index: 1;
    }
    #display .imgbox .show {
        opacity: 1;
        z-index: 2;
    }
    #display .imgbtn {
        position: relative;
        width: 100%;
        display: flex;
    }
    #display .imgbtn > li {
        width: 33%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
    }
    #display .imgbtn > li:hover {
        cursor: pointer;
        user-select: none;
    }
    #display .highlight {
        position: relative;
        top: 3px;
        left: 0px;
        width: 33%;
        height: 3px;
        background: #f00581;
        border-radius: 10px;
        transition: left 0.8s;
    }
</style>
<section id="display">
    <div>
        <img src="./static/bg-outline.jpg" width="100%" style="display: block">
    </div>
    <div class="outline">
        <div class="imgbox">
            <img src="https://b.appsimg.com/upload/momin/2021/09/03/27/1630660445401.jpg" class="" width="100%">
        </div>
        <ul class="imgbtn"></ul>
        <div class="highlight"></div>
    </div>
</section>
<script>
    //页面加载之后执行
    $(function () {
        var _timer = null, _index = 0, _preindex = 2, _highlight = $('.highlight').width(), _length = 0
        axios.get('./static/api/banner.json').then(res => {
            renderSwiper(res.data.data)
        })

        function renderSwiper (data) {
            var imgbox = data.map((item, index) => `<a href="${item.href}">
    <img src="${item.src}" class="${index === 0 ? 'show' : ''}" width="100%">
</a>`).join('')

            var imgbtn = data.map((item, index) => `<li data-index="${index}"><a href="${item.href}" style="color: #333333">${item.title}</a></li>`).join('')

            $('#display .imgbox').append(imgbox)
            $('#display .imgbtn').append(imgbtn)
            _length=$('#display .imgbox a img').length
            bindEvent()
            autoplay()
        }

        function clearStyle () {
            $('#display .imgbox img').each((index, item) => {
                $(item).removeClass('hide')
                $(item).removeClass('show')
            })
        }

        function bindEvent () {
            $('#display .imgbtn').on('mouseover', 'li', function (e) {
                _index = $(this).attr('data-index')
                _preindex = _index < 0 ? _length - 1 : _index - 1
                clearStyle()
                clearInterval(_timer)
                $('.highlight').css('left', _index * _highlight)
                $('#display .imgbox a img').eq(_preindex).addClass('hide')
                $('#display .imgbox a img').eq(_index).addClass('show')
            })
            $('#display .outline').on('mouseover', function () {
                clearInterval(_timer)
            })
            $('#display .outline').on('mouseout', function () {
                autoplay()
            })
        }

        function autoplay () {
            _timer = setInterval(() => {
                _preindex = _index
                _index = _index++ > _length - 2 ? 0 : _index++
                // console.log('run', _preindex, _index)
                clearStyle()
                $('.highlight').css('left', _index * _highlight)
                $('#display .imgbox a img').eq(_preindex).addClass('hide')
                $('#display .imgbox a img').eq(_index).addClass('show')
            }, 4000)
        }
    })
</script>